import { CockpitChartBaseProps } from "../helps";
import React from "react";
import * as echarts from "echarts";
export interface KxWorkerAttendanceBarChart extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxWorkerAttendanceBarChartOption = ({
  dataSource = [],
}: KxWorkerAttendanceBarChart): EChartsOption => {
  return {
    tooltip: {
      trigger: "item",
      position: ["50%", "50%"],
    },
    grid: {
      left: "12%",
      right: "12%",
      top: "20%",
      bottom: "18%",
    },
    legend: {
      data: dataSource.map((d) => d.name || ""),
      right: "7%",
      top: "8%",
      textStyle: {
        fontSize: "12px",
        color: "#FDFFFF",
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    xAxis: {
      type: "category",
      data: dataSource.map((d) => d.name || ""),
      axisLine: {
        lineStyle: {
          color: "#FEFFFF",
          opacity: 0.2,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 14,
        color: "#FDFFFF",
        margin: 19,
        overflow: "truncate",
        width: 65,
        align: "center",
        interval: 0,
      },
    },

    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.2,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.2,
          },
        },

        axisLabel: {
          fontSize: 12,
          fontFamily: "Arial",
          color: "#FDFFFF",
          opacity: 0.8,
          formatter: "{value}",
        },
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.2,
          },
        },
        axisLabel: {
          fontSize: 12,
          fontFamily: "Arial",
          color: "#FDFFFF",
          opacity: 0.8,
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: "计划出勤人数",
        type: "bar",
        barWidth: "10px",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#AEFFAE",
            },
            {
              offset: 1,
              color: "#19FFF4",
            },
          ]),
          borderRadius: 5,
        },
        data: dataSource.map((d) => d.planAmount || 0),
      },
      {
        name: "实际出勤人数",
        type: "bar",
        barWidth: "10px",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#00F6FE",
            },
            {
              offset: 1,
              color: "#0059AD",
            },
          ]),
          borderRadius: 5,
        },
        data: dataSource.map((d) => d.amount || 0),
      },
      {
        name: "出勤率",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: "#FD7D3E",
        },
        lineStyle: {
          color: "#ffa43a",
        },

        data: dataSource.map((d) => d.percent || 0),
      },
    ],
  };
};

const KxWorkerAttendanceBarChart = ({
  reactEChartsProps,
  dataSource,
}: KxWorkerAttendanceBarChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "313px",
      }}
      option={getKxWorkerAttendanceBarChartOption({
        dataSource,
      })}
    />
  );
};

export default KxWorkerAttendanceBarChart;
